{% extends 'base.html' %}

{% block content %}
<div class="container my-5">
    <!-- 顶部标题和欢迎信息 -->
    <div class="text-center mb-5">
        <h1 class="display-4 text-primary">
            <i class="fas fa-paw"></i> 猫咪收容所管理系统
        </h1>
        {% if user.is_authenticated %}
        <p class="lead text-muted">欢迎回来，{{ user.username }}！</p>
        {% endif %}
    </div>

    <!-- 功能卡片区 -->
    <div class="row justify-content-center">
        <!-- 猫咪信息卡片 -->
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="card border-primary h-100 shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-cat"></i> 猫咪信息
                    </h5>
                </div>
                <div class="card-body">
                    <p class="card-text">查看所有猫咪的基本信息、品种和健康状况。</p>
                    <div class="text-center">
                        <a href="{% url 'cat_list' %}" class="btn btn-outline-primary stretched-link">
                            进入管理 <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 领养申请卡片 -->
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="card border-success h-100 shadow-sm">
                <div class="card-header bg-success text-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-file-signature"></i> 领养申请
                    </h5>
                </div>
                <div class="card-body">
                    <p class="card-text">管理猫咪领养申请，审核领养人资格。</p>
                    <div class="text-center">
                        <a href="{% url 'apply_list' %}" class="btn btn-outline-success stretched-link">
                            进入管理 <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 捐款记录卡片 -->
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="card border-info h-100 shadow-sm">
                <div class="card-header bg-info text-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-donate"></i> 捐款记录
                    </h5>
                </div>
                <div class="card-body">
                    <p class="card-text">查看和管理所有捐款记录与捐赠人信息。</p>
                    <div class="text-center">
                        <a href="{% url 'donate_list' %}" class="btn btn-outline-info stretched-link">
                            进入管理 <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 领养人信息卡片 -->
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="card border-warning h-100 shadow-sm">
                <div class="card-header bg-warning text-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-users"></i> 领养人信息
                    </h5>
                </div>
                <div class="card-body">
                    <p class="card-text">维护领养人联系方式和历史记录。</p>
                    <div class="text-center">
                        <a href="{% url 'person_list' %}" class="btn btn-outline-warning stretched-link">
                            进入管理 <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 收容所信息卡片 -->
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="card border-secondary h-100 shadow-sm">
                <div class="card-header bg-secondary text-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-home"></i> 收容所信息
                    </h5>
                </div>
                <div class="card-body">
                    <p class="card-text">管理各收容所的基本信息和容量状态。</p>
                    <div class="text-center">
                        <a href="{% url 'site_list' %}" class="btn btn-outline-secondary stretched-link">
                            进入管理 <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 退出登录按钮 -->
    {% if user.is_authenticated %}
    <div class="text-center mt-5">
        <form action="{% url 'logout' %}" method="post" class="d-inline-block">
            {% csrf_token %}
            <button type="submit" class="btn btn-danger btn-lg">
                <i class="fas fa-sign-out-alt"></i> 退出登录
            </button>
        </form>
    </div>
    {% endif %}
</div>

<style>
    /* 自定义样式 */
    .card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-radius: 10px;
    }
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    .card-header {
        border-radius: 10px 10px 0 0 !important;
    }
    .stretched-link::after {
        border-radius: 5px;
    }
</style>
{% endblock %}